<template>
  <z-modal
      v-bind="modalOption"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-form-model-item label="分类名称" prop="typeName">
          <a-input placeholder="请输入分类名称" :disabled="disableSubmit" v-model.trim="form.typeName"/>
        </a-form-model-item>
        <a-form-model-item label="排序序号" prop="seqNo">
          <a-input-number placeholder="请输入分类序号" :min="1" :disabled="disableSubmit" style="width: 100%;" v-model.trim="form.seqNo"/>
        </a-form-model-item>
        <a-form-model-item label="图片">
          <a-upload
              list-type="picture-card"
              :file-list="fileList"
              @preview="handlePreview"
              @change="handleChange"
              :customRequest="onUpload"
              :disabled="disableSubmit"
          >
            <div v-if="fileList.length < 1 && !disableSubmit">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelView">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { postAction } from '@/services/manage'
import { Upload as AUpload } from 'ant-design-vue'

export default {
  name: 'GoodsTypeModal',
  mixins: [ModalFormMixin],
  components: {
    AUpload
  },
  data() {
    return {
      title: '操作',
      visible: false,
      confirmLoading: false,
      form: {},
      fileList: [],
      previewVisible: false,
      previewImage: '',
      validatorRules: {
        typeName: [{ required: true, message: '请输入分类名称!' }],
        seqNo: [{ required: true, message: '请输入序号!' }]
      },
      url: {
        add: '/doc/goodstype/v1/add',
        edit: '/doc/goodstype/v1/edit'
      }
    }
  },
  methods: {
    editAfter(row) {
      if (row.pic) {
        const pic = JSON.parse(row.textMap['pic$DICT_TEXT_'])[0]
        this.fileList.push({
          uid: pic.fileNo,
          name: pic.fileName,
          status: 'done',
          url: pic.absolutePath,
          response: pic.fileNo
        })
      }
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleCancelView() {
      this.previewVisible = false
    },
    handleChange({ file, fileList }) {
      this.fileList = fileList
      this.form.pic = file.response
    },
    onUpload(info) {
      const formData = new FormData()
      formData.append('file', info.file)
      postAction('/doc/goods/v1/upload', formData).then(res => {
        if (res.success) {
          this.$message.success('上传成功')
          info.onSuccess(res.result, info.file)
        }
      })
    },
    submitBefore() {
      if (this.fileList.length === 0) {
        return new Promise((resolve, reject) => { reject({ message: '请上传首页图片' }) })
      }
    }
  }
}
</script>
